import React from "react";
import "./style.css";
import Mock from "mockjs";
import axios from "axios";


Mock.mock("/api/list", () => {
  return Mock.mock({
    code: 200,
    "data|30": [
      {
        title: "@ctitle(2)",
        "children|10-50": [{
          "image": "@image(100x100, @color)",
          "title": "@ctitle(2, 5)"
        }]
      },
    ],
    message: "数据请求成功",
  });
});

class App2 extends React.Component {
  state = {
    tab: [],
    activeIndex: 0
  };
  handleChangeIndex(i) {
    this.setState({
      activeIndex: i
    })
  }
  componentDidMount() {
    axios.get("/api/list").then((resp) => {
      console.log(resp.data.data);
      this.setState({
        tab: resp.data.data,
      });
    });
  }
  render() {
    const { tab, activeIndex } = this.state;
    return (
      <div className="tab">
        <div className="left">
          <ul>
            {tab.map((v, i) => {
              return <li onClick={() => this.handleChangeIndex(i)} key={i} className={ activeIndex === i ? 'active': ''}>{v.title}</li>;
            })}
          </ul>
        </div>
        <div className="right">
            {
              tab.length && tab[activeIndex].children.map((v, i) => {
                return <dl key={i}>
                  <dt>
                    <img src={v.image} alt="" />
                  </dt>
                  <dd>
                    <h3>{v.title}</h3>
                  </dd>
                </dl>
              })
            }
        </div>
      </div>
    );
  }
}

export default App2;
